<template>
  <div class="index-OperationMaintenanceReasons">
    <div class="index-module-header-mini">
      <div class="index-module-title" style="color:white;">饼图</div>
    </div>
    <div ref="chartRef" class="index-OperationMaintenanceReasons-chart"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const router = useRouter()

const chartRef = ref(null)
let mapChart = null

let colorList = ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', 'rgba(250,250,250,0.5)']

let optionWithData = {
  title: {
    text: '544',
    subtext: '物联设备',
    // x: 'center',
    // y: 'center',
    top: '35%',
    left: 'center', // 水平对齐方式
    padding: 0,
    bottom: 'center',
    itemGap: 1, // 主副标题相隔间距
    textStyle: {
      fontSize: 22,
      fontWeight: '700',
      color: ['#fff']
    },
    subtextStyle: {
      color: '#fff',
      fontSize: 12
    }
  },
  grid: {
    bottom: '10%',
    left: 0,
    right: '10%'
  },
  color: ['#163153', '#164A53', '#55463A', '#552F1D', '#2C455E'],
  legend: {
    show: false,
    orient: 'vertical',
    top: 'middle',
    right: '10%',
    textStyle: {
      color: '#f2f2f2',
      fontSize: 1
    },
    icon: 'roundRect'
  },

  series: [
    {
      type: 'pie',
      radius: ['50%', '80%'], // 外半径和内半径的设置创造出环形效果，两者之间的差值即为间隔空隙
      center: ['50%', '50%'],
      data: [
        { value: 2500, name: '电池更换' },
        { value: 3000, name: '传感器损坏' },
        { value: 2000, name: '探头损坏' },
        { value: 1500, name: '测试原因' },
        { value: 1000, name: '角度原因' }
      ],
      itemStyle: {
        borderRadius: 1, // 可选，为扇区边缘添加圆角
        borderColor: '#1f1b17', // 扇区边缘颜色
        borderWidth: 3 // 扇区边缘宽度
      },
      label: {
        show: true,
        color: '#fff',
        formatter: '{b} {c}',
        position: 'outside',
        fontSize: 12,
        overflow: 'break'
        // alignTo: 'edge',
        // edgeDistance: '10%'
      },
      labelLine: {
        show: true
      }
    }
  ]
}

let optionWithoutData = {
  grid: {
    top: '10%',
    left: '0%',
    right: '0%',
    bottom: '0%',
    containLabel: true
  },
  graphic: {
    elements: [
      {
        type: 'text',
        left: 'center',
        top: 'middle',
        style: {
          text: '暂无数据',
          fill: '#999',
          fontSize: 14
        }
      }
    ]
  }
}

const resizeHandler = () => {
  mapChart.resize()
}
const renderMap = () => {
  if (!mapChart) {
    mapChart = echarts.init(chartRef.value, null, {
      renderer: 'svg'
    })
  }
  mapChart.dispatchAction({
    type: 'restore'
  })
  mapChart.setOption(optionWithData)
  mapChart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 })
}
onMounted(() => {
  renderMap()
  window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
  window.removeEventListener('resize', resizeHandler)
})
</script>

<style lang="scss">
.index-OperationMaintenanceReasons {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(98, 81, 55, 0.1);

  .index-OperationMaintenanceReasons-chart {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    // padding: 0 12px;
  }

  .index-OperationMaintenanceReasons-tooltip {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1c1711 0%, #18150f 100%);
    box-shadow: 0px 2px 8px 0px rgba(235, 94, 18, 0.09);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #dda862;
    padding: 6px 10px;

    .index-OperationMaintenanceReasons-tooltip-title {
      font-weight: 600;
      font-size: 14px;
      color: #ecf8ff;
    }

    .index-OperationMaintenanceReasons-tooltip-list {
      display: flex;
      align-items: baseline;
      justify-content: space-between;

      .index-OperationMaintenanceReasons-tooltip-list-key {
        white-space: nowrap;
        font-size: 12px;
        color: rgba(236, 248, 255, 0.8);
      }

      .index-OperationMaintenanceReasons-tooltip-list-value {
        white-space: nowrap;
        margin-left: 30px;
        text-align: right;
        font-weight: 600;
        font-size: 12px;
        color: rgba(236, 248, 255, 0.8);
      }
    }
  }
}
</style>
